<template>
	<zh-form ref="userForm" :rowFlag="false" :model="state.form" :rules="state.rules">
		<zh-card title="基本信息">
			<zh-row>
				<zh-form-input prop="userName" label="用户名" v-model="state.form.userName"></zh-form-input>
				<zh-form-select
					prop="cardType"
					label="证件类型"
					placeholder="单选"
					allowClear
					:options="props.dictData.cardType"
					v-model="state.form.cardType"
				></zh-form-select>
				<zh-form-input prop="idcard" label="证件号码" v-model="state.form.idcard"></zh-form-input>
				<zh-form-input prop="fullName" label="姓名" v-model="state.form.fullName"></zh-form-input>
				<zh-form-select prop="sex" label="性别" placeholder="单选" allowClear :options="props.dictData.sex" v-model="state.form.sex"></zh-form-select>
				<zh-form-date prop="birthday" label="出生日期" format="YYYY-MM-DD" v-model="state.form.birthday"></zh-form-date>
				<zh-form-input prop="cellphone" label="手机号码" v-model="state.form.cellphone"></zh-form-input>
				<zh-form-input prop="officePhone" label="办公室电话" v-model="state.form.officePhone"></zh-form-input>
				<zh-form-input prop="shortPhone" label="手机短号" v-model="state.form.shortPhone"></zh-form-input>
				<zh-form-input prop="email" label="邮箱" v-model="state.form.email"></zh-form-input>
				<zh-form-select
					prop="userType"
					:disabled="state.userTypeDisabled"
					label="用户类型"
					placeholder="单选"
					allowClear
					:options="props.dictData.userType"
					v-model="state.form.userType"
				></zh-form-select>
				<zh-form-select
					prop="status"
					label="状态"
					placeholder="单选"
					allowClear
					:options="state.statusData"
					v-model="state.form.status"
				></zh-form-select>
				<zh-form-select
					placeholder="请搜索，单选"
					funcCode="org0001"
					label="所在单位组织"
					prop="orgId"
					:timeout="20000"
					searchField="orgName"
					:fieldNames="{
						label: 'orgName',
						value: 'orgId',
					}"
					:lazy="true"
					v-model="state.form.orgId"
				>
				</zh-form-select>
				<zh-form-select
					prop="appId"
					:lazy="true"
					label="所属应用"
					:timeout="20000"
					v-model="state.form.appId"
					:fieldNames="{ label: 'appName', value: 'appId' }"
					funcCode="application0012"
					searchField="appName"
				></zh-form-select>
				<zh-form-select
					prop="realFlag"
					label="是否实人认证"
					placeholder="单选"
					allowClear
					:options="state.flagData"
					v-model="state.form.realFlag"
				></zh-form-select>
			</zh-row>
		</zh-card>
		<zh-card title="其他">
			<zh-row :span="8">
				<zh-form-input prop="nikeName" label="昵称" v-model="state.form.nikeName"></zh-form-input>
				<zh-form-number prop="orderNo" label="排序号" v-model="state.form.orderNo"></zh-form-number>
				<zh-form-input :span="24" prop="userIp" label="登录ip白名单" v-model="state.form.userIp"></zh-form-input>
				<zh-form-input :span="24" prop="addressDetail" label="地址" v-model="state.form.addressDetail"></zh-form-input>
				<zh-form-upload :span="24" label="头像" :limit="1" v-model="state.form.avatarShowId" @on-change="imgChange"> </zh-form-upload>
				<zh-form-input :span="24" :rows="4" prop="remarks" type="textarea" label="备注" v-model="state.form.remarks"></zh-form-input>
			</zh-row>
		</zh-card>
	</zh-form>
</template>

<script lang="ts" setup name="UserForm">
import validate from '@/utils/validate';
import { ElMessage } from 'element-plus';
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	userInfo: {
		type: Object,
		default: () => {},
		required: false,
	},
	modelValue: Boolean,
	showFlag:Boolean,
	dictData: {
		type: Array,
		default: () => {},
		required: false,
	},
});

//------------------定义子组件---------------------------
const userForm = ref<any>({});

//------------------内部变量定义-------------------------
const state = reactive({
	statusData: [
		{ dictKey: '1', dictValue: '启用' },
		{ dictKey: '0', dictValue: '禁用' },
	],
	flagData: [
		{ dictKey: '1', dictValue: '是' },
		{ dictKey: '0', dictValue: '否' },
	],
	rules: {
		userName: [{ required: true, message: '请输入用户名', whitespace: true }],
		cardType: [{ required: false, message: '请选择证件类型' }],
		idcard: [
			{ required: false, message: '请输入证件号码', whitespace: true },
			{ validator: checkIdcard, trigger: 'change' },
		],
		fullName: [{ required: true, message: '请输入账号名称', whitespace: true }],
		cellphone: [
			{ required: false, message: '请输入手机号码', whitespace: true, pattern: /^1[3456789]\d{9}$/ },
			{ message: '请输入正确的手机号码', pattern: /^1[3456789]\d{9}$/ },
		],
		email: [{ required: false, type: 'email', message: '请输入邮箱地址' }],
		userType: [{ required: true, message: '请选择用户类型' }],
		status: [{ required: true, message: '请选择用户状态' }],
	},
	userTypeDisabled: true,
	orgSelectTreeData: [],
	form: {
		userId: undefined,
		userName: undefined,
		cardType: '01',
		idcard: undefined,
		fullName: undefined,
		sex: undefined,
		birthday: undefined,
		cellphone: undefined,
		officePhone: undefined,
		shortPhone: undefined,
		email: undefined,
		userType: '10',
		status: '1',
		orgIdList: [],
		orgId: undefined,
		orgName: undefined,
		appName: undefined,
		realFlag: '1',
		nikeName: undefined,
		orderNo: undefined,
		userIp: undefined,
		addressDetail: undefined,
		remarks: undefined,
		appId: undefined,
		photoPath: undefined,
		avatarShowId: undefined,
	},
});

//------------------定义调用方法-------------------------
function checkIdcard(rule, value, callback) {
	if (!value) {
		callback();
		return;
	}
	if (state.form.cardType === '01' && !validate.isIdcard(value)) {
		callback(new Error('请输入正确的身份证'));
	} else {
		callback();
	}
}
function imgChange(e) {
	state.form.photoPath = $api.common.fileShowUrl.url + e[0];
}
async function saveUser() {
	//校验表单
	let checkFlag = await userForm.value.checkForm();
	if (checkFlag) {
		const userInfo = state.form;
		let ret = null as any;
		if (userInfo.userId) {
			ret = await $api.common.send.postCrypto('user0002', userInfo);
			if (ret.code === 0) {
				ElMessage.success('修改成功！');
			}
		} else {
			ret = await $api.common.send.postCrypto('user0001', userInfo);
			ret.saveType = 'add';
			if (ret.code === 0) {
				ElMessage.success('创建成功！');
			}
		}
		return ret;
	}
	return null;
}

//------------------初始化------------------------------

// 数据初始化
if (props.userInfo) {
	if (props.userInfo.userType) {
		state.userTypeDisabled = true;
		// eslint-disable-next-line vue/no-setup-props-destructure
		state.form.userType = props.userInfo.userType;
	} else {
		state.userTypeDisabled = false;
	}
	if (props.userInfo.userId) {
		let userParams = {
			userId: props.userInfo.userId,
		};
		$api.common.send.postCrypto('user0003', userParams).then((res) => {
			let form = Object.assign(state.form, res.result);
			state.form = form;
		});
	}
} else {
	state.userTypeDisabled = false;
}

//------------设置给父组件调用的数据/方法(组件)-----------
defineExpose({ form: state.form, saveUser });
</script>
